<!--  -->
<template>
  <div class="special-main">
    <van-list   v-model="loading" :finished="finished" finished-text="没有更多了" @load="getTopicList">
      <div class="topicList">
        <div class="topicItem" v-for="item in topicList" :key="item.id" @click="goTopicDetail(item.id)">
          <img class="topicItemImg" :src="item.scene_pic_url" alt />
          <div class="topicItemInfo">
            <div class="topicItemInfoTitle">{{item.title}}</div>
            <div class="topicItemInfoSubtitle">{{item.subtitle}}</div>
            <div class="topicItemInfoPrice">{{item.price_info}}元起</div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
//重点:1.concat()用于连接两个或多个数组, 在该页面的用法,将不同页面的内容连接起来在同一页面展示
import topicApi from "@/api/topic/index";
import Vue from "vue";
import { List } from "vant";

Vue.use(List);
export default {
  name: "topic",
  data() {
    return {
      topicList: [],
      loading: false,
      finished: false,
      page: 1,
      total:2
    };
  },
  created() {},
  methods: {
    async getTopicList() {
      this.loading=true
      await topicApi.topicList({
          page: this.page,
        })
        .then((res) => {
          this.topicList = this.topicList.concat(res.data);
          this.total=res.total
          this.page++;
          this.loading=false
          if(this.page > this.total){
             this.finished = true;
          }
        });
    },
    //专题详情页
    goTopicDetail(id){
      this.$router.push({name:'topicDetail',params:{id}})
    }
  },
};
</script>
<style lang='scss' scoped>
.special-main {
  .topicList {
    .topicItem {
      height: 330px;
      margin-bottom: 5px;
      .topicItemImg {
        height: 207px;
        width: 100%;
      }
      .topicItemInfo {
        text-align: center;
        .topicItemInfoTitle {
          padding-top: 15px;
          color: #333;
          font-size: 17px;
        }
        .topicItemInfoSubtitle {
          color: #999;
          padding-top: 10px;
        }
        .topicItemInfoPrice {
          font-size: 13px;
          color: $baseColor;
          padding-top: 10px;
        }
      }
    }
  }
}
</style>